/**
 * 主题管理 Store
 * 用于全局主题切换和管理
 */
import { ref } from 'vue';

/**
 * 主题配置接口
 */
export interface ThemeConfig {
	name: string;
	value: string;
	
	// 🎨 主色系
	primaryGradient: string;        // 主渐变色
	primaryColor: string;            // 主色
	primaryLight: string;            // 主色-浅
	primaryDark: string;             // 主色-深
	
	// 🎨 辅助色系
	secondaryColor: string;          // 辅助色
	secondaryLight: string;          // 辅助色-浅
	
	// 🎨 中性色系
	textPrimary: string;             // 主要文字
	textSecondary: string;           // 次要文字
	textTertiary: string;            // 三级文字
	textPlaceholder: string;         // 占位文字
	
	borderColor: string;             // 边框颜色
	borderLight: string;             // 浅边框
	
	// 🎨 背景色系
	bgPrimary: string;               // 主背景
	bgSecondary: string;             // 次背景
	bgTertiary: string;              // 三级背景
	bgCard: string;                  // 卡片背景
	
	// 🎨 功能色/语义色
	successColor: string;            // 成功色
	warningColor: string;            // 警告色
	errorColor: string;              // 错误色
	infoColor: string;               // 信息色
	
	// 🎨 阴影
	cardShadow: string;              // 卡片阴影色
	buttonShadow: string;            // 按钮阴影色
	hoverShadow: string;             // 悬浮阴影色
}

/**
 * 预设主题配置
 */
export const THEME_PRESETS: Record<string, ThemeConfig> = {
	default: {
		name: '默认风格',
		value: 'default',
		// 主色系 - 紫粉渐变（现代活力）
		primaryGradient: 'radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%)',
		primaryColor: '#3F5EFB',
		primaryLight: '#6B81FC',
		primaryDark: '#2E4AD9',
		// 辅助色系
		secondaryColor: '#FC466B',
		secondaryLight: '#FD7090',
		// 中性色系
		textPrimary: '#1e293b',
		textSecondary: '#475569',
		textTertiary: '#64748b',
		textPlaceholder: '#94a3b8',
		borderColor: '#e2e8f0',
		borderLight: '#f1f5f9',
		// 背景色系
		bgPrimary: '#ffffff',
		bgSecondary: '#f8f9ff',
		bgTertiary: '#ede9fe',
		bgCard: '#ffffff',
		// 功能色
		successColor: '#10b981',
		warningColor: '#f59e0b',
		errorColor: '#ef4444',
		infoColor: '#3b82f6',
		// 阴影
		cardShadow: 'rgba(63, 94, 251, 0.08)',
		buttonShadow: 'rgba(63, 94, 251, 0.35)',
		hoverShadow: 'rgba(63, 94, 251, 0.15)'
	},
	green: {
		name: '清新绿',
		value: 'green',
		// 主色系
		primaryGradient: 'linear-gradient(135deg, #4ade80 0%, #22c55e 100%)',
		primaryColor: '#22c55e',
		primaryLight: '#4ade80',
		primaryDark: '#16a34a',
		// 辅助色系
		secondaryColor: '#10b981',
		secondaryLight: '#34d399',
		// 中性色系
		textPrimary: '#1e293b',
		textSecondary: '#475569',
		textTertiary: '#64748b',
		textPlaceholder: '#94a3b8',
		borderColor: '#e2e8f0',
		borderLight: '#f1f5f9',
		// 背景色系
		bgPrimary: '#ffffff',
		bgSecondary: '#f0fdf4',
		bgTertiary: '#dcfce7',
		bgCard: '#ffffff',
		// 功能色
		successColor: '#10b981',
		warningColor: '#f59e0b',
		errorColor: '#ef4444',
		infoColor: '#3b82f6',
		// 阴影
		cardShadow: 'rgba(34, 197, 94, 0.08)',
		buttonShadow: 'rgba(34, 197, 94, 0.35)',
		hoverShadow: 'rgba(34, 197, 94, 0.15)'
	},
	orange: {
		name: '彩虹风格',
		value: 'orange',
		// 主色系 - 彩虹渐变（Instagram风格）
		primaryGradient: 'linear-gradient(135deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%)',
		primaryColor: '#833AB4',
		primaryLight: '#A855F7',
		primaryDark: '#6B21A8',
		// 辅助色系
		secondaryColor: '#FD1D1D',
		secondaryLight: '#FCB045',
		// 中性色系
		textPrimary: '#1e293b',
		textSecondary: '#475569',
		textTertiary: '#64748b',
		textPlaceholder: '#94a3b8',
		borderColor: '#e2e8f0',
		borderLight: '#f1f5f9',
		// 背景色系
		bgPrimary: '#ffffff',
		bgSecondary: '#faf5ff',
		bgTertiary: '#f3e8ff',
		bgCard: '#ffffff',
		// 功能色
		successColor: '#10b981',
		warningColor: '#f59e0b',
		errorColor: '#ef4444',
		infoColor: '#3b82f6',
		// 阴影
		cardShadow: 'rgba(131, 58, 180, 0.08)',
		buttonShadow: 'rgba(131, 58, 180, 0.35)',
		hoverShadow: 'rgba(131, 58, 180, 0.15)'
	},
	blue: {
		name: '科技蓝',
		value: 'blue',
		// 主色系 - 深蓝渐变（科技感）
		primaryGradient: 'linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%)',
		primaryColor: '#090979',
		primaryLight: '#00D4FF',
		primaryDark: '#020024',
		// 辅助色系
		secondaryColor: '#00D4FF',
		secondaryLight: '#4DE4FF',
		// 中性色系
		textPrimary: '#1e293b',
		textSecondary: '#475569',
		textTertiary: '#64748b',
		textPlaceholder: '#94a3b8',
		borderColor: '#e2e8f0',
		borderLight: '#f1f5f9',
		// 背景色系
		bgPrimary: '#ffffff',
		bgSecondary: '#eff6ff',
		bgTertiary: '#dbeafe',
		bgCard: '#ffffff',
		// 功能色
		successColor: '#10b981',
		warningColor: '#f59e0b',
		errorColor: '#ef4444',
		infoColor: '#00D4FF',
		// 阴影
		cardShadow: 'rgba(9, 9, 121, 0.08)',
		buttonShadow: 'rgba(9, 9, 121, 0.35)',
		hoverShadow: 'rgba(0, 212, 255, 0.15)'
	},
	pink: {
		name: '梦幻粉',
		value: 'pink',
		// 主色系 - 粉蓝渐变（柔和梦幻）
		primaryGradient: 'radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%)',
		primaryColor: '#EEAECA',
		primaryLight: '#F5C5DB',
		primaryDark: '#E18DB7',
		// 辅助色系
		secondaryColor: '#94BBE9',
		secondaryLight: '#B5D4F5',
		// 中性色系
		textPrimary: '#1e293b',
		textSecondary: '#475569',
		textTertiary: '#64748b',
		textPlaceholder: '#94a3b8',
		borderColor: '#e2e8f0',
		borderLight: '#f1f5f9',
		// 背景色系
		bgPrimary: '#ffffff',
		bgSecondary: '#fef3f9',
		bgTertiary: '#fce7f3',
		bgCard: '#ffffff',
		// 功能色
		successColor: '#10b981',
		warningColor: '#f59e0b',
		errorColor: '#ef4444',
		infoColor: '#94BBE9',
		// 阴影
		cardShadow: 'rgba(238, 174, 202, 0.08)',
		buttonShadow: 'rgba(238, 174, 202, 0.35)',
		hoverShadow: 'rgba(148, 187, 233, 0.15)'
	},
	dark: {
		name: '暗夜黑',
		value: 'dark',
		// 主色系 - 深色现代科技感
		primaryGradient: 'linear-gradient(135deg, #22223b 0%, #3a3550 60%, #6366f1 100%)',
		primaryColor: '#6366f1',           // 以亮一点的主色，保证按钮/高亮等可见
		primaryLight: '#818cf8',           // 主色浅（用于按钮 Hover、选中等）
		primaryDark: '#22223b',            // 主色深
		// 辅助色系
		secondaryColor: '#818cf8',         // 强调色选择浅紫，保证对比度
		secondaryLight: '#a5b4fc',         // 更淡辅助
		// 中性色系 - 暗色模式反转
		textPrimary: '#f8fafc',            // 主要文字 - 高亮白
		textSecondary: '#dbeafe',          // 次要文字 - 明亮蓝灰
		textTertiary: '#94a3b8',           // 三级文字
		textPlaceholder: '#64748b',        // 占位文字
		borderColor: '#334155',            // 边框
		borderLight: '#334155',            // 浅边框适当提亮
		// 背景色系 - 保证充分快对比度
		bgPrimary: '#181926',              // 主背景（比原来略亮，减弱纯黑压抑/反光）
		bgSecondary: '#23263A',            // 次背景
		bgTertiary: '#242742',             // 三级背景
		bgCard: '#22223b',                 // 卡片背景更亮，突出卡片
		// 功能色 - 增强在暗色下的辨识度
		successColor: '#4ade80',           // 更亮成功色
		warningColor: '#fbbf24',
		errorColor: '#f87171',
		infoColor: '#60a5fa',              // 明亮蓝
		// 阴影 - 暗色下弱一点的冷色投影
		cardShadow: 'rgba(30, 41, 59, 0.42)',
		buttonShadow: 'rgba(99, 102, 241, 0.32)',
		hoverShadow: 'rgba(99, 102, 241, 0.18)'
	}
};

/**
 * 当前主题
 */
export const currentTheme = ref<string>('default');

/**
 * 当前主题配置
 */
export const currentThemeConfig = ref<ThemeConfig>(THEME_PRESETS.default);

/**
 * 初始化主题
 * 从本地存储加载保存的主题
 */
export function initTheme() {
	try {
		const savedTheme = uni.getStorageSync('appStyle');
		if (savedTheme && THEME_PRESETS[savedTheme]) {
			currentTheme.value = savedTheme;
			currentThemeConfig.value = THEME_PRESETS[savedTheme];
			
			// 触发全局事件，通知所有页面更新主题
			// 使用 setTimeout 确保事件在所有页面挂载后触发
			setTimeout(() => {
				uni.$emit('themeChange', savedTheme);
			}, 100);
		}
	} catch (error) {
		console.error('加载主题失败:', error);
	}
}

/**
 * 切换主题
 * @param themeValue 主题值
 */
export function setTheme(themeValue: string) {
	if (!THEME_PRESETS[themeValue]) {
		console.error('主题不存在:', themeValue);
		return;
	}

	currentTheme.value = themeValue;
	currentThemeConfig.value = THEME_PRESETS[themeValue];

	// 保存到本地存储
	try {
		uni.setStorageSync('appStyle', themeValue);
	} catch (error) {
		console.error('保存主题失败:', error);
	}

	// 触发全局事件
	uni.$emit('themeChange', themeValue);
}

/**
 * 获取当前主题配置
 */
export function getThemeConfig(): ThemeConfig {
	return currentThemeConfig.value;
}

/**
 * 获取主题样式对象
 * 用于动态绑定样式
 */
export function getThemeStyles() {
	const config = currentThemeConfig.value;
	return {
		// 🎨 主色系
		primaryGradient: config.primaryGradient,
		primaryColor: config.primaryColor,
		primaryLight: config.primaryLight,
		primaryDark: config.primaryDark,
		
		// 🎨 辅助色系
		secondaryColor: config.secondaryColor,
		secondaryLight: config.secondaryLight,
		
		// 🎨 中性色系
		textPrimary: config.textPrimary,
		textSecondary: config.textSecondary,
		textTertiary: config.textTertiary,
		textPlaceholder: config.textPlaceholder,
		border: config.borderColor,
		borderColor: config.borderColor,
		borderLight: config.borderLight,
		
		// 🎨 背景色系
		bgPrimary: config.bgPrimary,
		bgSecondary: config.bgSecondary,
		bgTertiary: config.bgTertiary,
		bgCard: config.bgCard,
		
		// 🎨 强调背景和边框（用于统计卡片等）
		accentBg: `linear-gradient(135deg, ${config.primaryColor}10 0%, ${config.secondaryColor}10 100%)`,
		accentBorder: `${config.primaryColor}33`,
		
		// 🎨 功能色
		successColor: config.successColor,
		warningColor: config.warningColor,
		errorColor: config.errorColor,
		infoColor: config.infoColor,
		
		// 🎨 阴影样式
		cardBoxShadow: `0 4rpx 20rpx ${config.cardShadow}`,
		buttonBoxShadow: `0 8rpx 24rpx ${config.buttonShadow}`,
		hoverBoxShadow: `0 8rpx 32rpx ${config.hoverShadow}`,
		activeShadow: `0 8rpx 20rpx ${config.buttonShadow}`,
		focusBoxShadow: `0 0 0 6rpx ${config.primaryColor}1a`,
		shadowSm: `0 2rpx 8rpx ${config.cardShadow}`,
		
		// 🎨 边框样式
		cardBorder: `1px solid ${config.borderLight}`,
		
		// 🎨 渐变背景
		bgGradient: `linear-gradient(to bottom, ${config.bgSecondary} 0%, ${config.bgTertiary} 100%)`
	};
}

/**
 * 获取主题 CSS 变量字符串
 * 用于动态设置 CSS 变量
 */
export function getThemeCSSVars() {
	const config = currentThemeConfig.value;
	return {
		'--theme-primary': config.primaryColor,
		'--theme-primary-light': config.primaryLight,
		'--theme-primary-dark': config.primaryDark,
		'--theme-primary-gradient': config.primaryGradient,
		'--theme-secondary': config.secondaryColor,
		'--theme-secondary-light': config.secondaryLight,
		'--theme-text-primary': config.textPrimary,
		'--theme-text-secondary': config.textSecondary,
		'--theme-text-tertiary': config.textTertiary,
		'--theme-text-placeholder': config.textPlaceholder,
		'--theme-border': config.borderColor,
		'--theme-border-light': config.borderLight,
		'--theme-bg-primary': config.bgPrimary,
		'--theme-bg-secondary': config.bgSecondary,
		'--theme-bg-tertiary': config.bgTertiary,
		'--theme-bg-card': config.bgCard,
		'--theme-success': config.successColor,
		'--theme-warning': config.warningColor,
		'--theme-error': config.errorColor,
		'--theme-info': config.infoColor,
		'--theme-card-shadow': config.cardShadow,
		'--theme-button-shadow': config.buttonShadow,
		'--theme-hover-shadow': config.hoverShadow
	};
}

